import classNames from "classnames";
import { type FC } from "react";
import { useMemoizedFn, useUpdateEffect } from "ahooks";
import { produce } from "immer";
import { Radio } from "antd";
import contentStyle from "../../index.module.scss";
import styles from "../index.module.scss";
import { batchUpdateCustomization } from "../layout";
import DetailsSort from "./detailsSort";
import Spacing from "./spacing";
import Photo from "./photo";
import { useCustomizationStore } from "@/src/providers/customization-store-provider";
import { usePersonalDetailStore } from "@/src/providers/personal-detail-store-provider";
// import { useCustomizationStore, usePersonalDetailsStore } from "@/store";

interface IndexProps {}

const Index: FC<IndexProps> = () => {
  const { updateHeader, addCustomization, customization } =
    useCustomizationStore(
      (state) => state
      // (o, n) => {
      //   return (
      //     o.customization.header === n.customization.header &&
      //     o.customization.layout.detailsPosition ===
      //       n.customization.layout.detailsPosition
      //   );
      // }
    );

  const { personalDetails } = usePersonalDetailStore(
    (state) => state,
    (o, n) => {
      return o.personalDetails.id === n.personalDetails.id;
    }
  );

  const { header, layout } = customization;
  const { showPosition, showDetailsPosition } = header || {};

  const run = (data) => {
    batchUpdateCustomization({
      updates: data,
      id: customization.id,
    });
  };
  const onChange = useMemoizedFn((key, v, changeLayout?) => {
    const data = produce(customization.header, (draft) => {
      if (key === "position" || key === "detailsArrangement") {
        if (changeLayout) {
          if (layout.detailsPosition !== "top") {
            draft.detailsArrangement = "column";
          } else {
            draft.detailsArrangement = "wrap";
          }
        }
      }
      draft[key] = v;
    });

    if (customization.id) {
      // const values = []
      // Object.keys(data).forEach((key) => {
      //   values.push({
      //     path: `header.${key}`,
      //     value: data[key],
      //   })
      // })
      if (changeLayout) {
        run([
          {
            path: `header.detailsArrangement`,
            value: data.detailsArrangement,
          },
          {
            path: `header.${key}`,
            value: data[key],
          },
        ]);
      } else {
        run([
          {
            path: `header.${key}`,
            value: data[key],
          },
        ]);
      }
      run([
        {
          path: `header.${key}`,
          value: data[key],
        },
      ]);
    } else if (personalDetails.id && !changeLayout) {
      updateHeader(data);
      addCustomization(personalDetails.id);
      return;
    }
    updateHeader(data);
  });
  // useUpdateEffect(() => {
  //   if (layout.detailsPosition !== 'top') {
  //     onChange('position', 'top', true)
  //   }
  //   if (layout.detailsPosition === 'top') {
  //     onChange('position', 'left', true)
  //   }
  // }, [layout.detailsPosition])
  return (
    <div className={classNames(styles.header, contentStyle.card)}>
      <h1 className={contentStyle.title} style={{ marginBottom: "30px" }}>
        个人详情
      </h1>
      {layout.detailsPosition === "top" ? (
        <>
          {showPosition !== false ? (
            <>
              <h1
                className={contentStyle.subtitle}
                style={{ marginBottom: "20px" }}
              >
                照片位置
              </h1>
              <div className={styles.columns}>
                {layout.detailsPosition === "top" ? (
                  <>
                    <div
                      className={classNames(
                        styles.columnItem,
                        header.position === "left" ? styles.active : ""
                      )}
                      onClick={() => {
                        onChange("position", "left");
                      }}
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        style={{ width: "45px" }}
                        fill="currentColor"
                        viewBox="0 0 92 26"
                      >
                        <path d="M26 13c0 7.18-5.82 13-13 13S0 20.18 0 13 5.82 0 13 0s13 5.82 13 13zM90 2H36a2 2 0 00-2 2v5a2 2 0 002 2h54a2 2 0 002-2V4a2 2 0 00-2-2zm0 13H36a2 2 0 00-2 2v5a2 2 0 002 2h54a2 2 0 002-2v-5a2 2 0 00-2-2z"></path>
                      </svg>
                    </div>
                    <div
                      className={classNames(
                        styles.columnItem,
                        header.position === "right" ? styles.active : ""
                      )}
                      onClick={() => {
                        onChange("position", "right");
                      }}
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        style={{ width: "45px" }}
                        fill="currentColor"
                        viewBox="0 0 92 26"
                      >
                        <path d="M92 13c0 7.18-5.82 13-13 13s-13-5.82-13-13S71.82 0 79 0s13 5.82 13 13zM56 2H2a2 2 0 00-2 2v5a2 2 0 002 2h54a2 2 0 002-2V4a2 2 0 00-2-2zm0 13H2a2 2 0 00-2 2v5a2 2 0 002 2h54a2 2 0 002-2v-5a2 2 0 00-2-2z"></path>
                      </svg>
                    </div>
                  </>
                ) : null}

                <div
                  className={classNames(
                    styles.columnItem,
                    header.position === "top" ? styles.active : ""
                  )}
                  onClick={() => {
                    onChange("position", "top");
                  }}
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    style={{ width: "45px" }}
                    fill="currentColor"
                    viewBox="0 0 92 56"
                  >
                    <path d="M88.828 34H3.172C1.42 34 0 34.895 0 36v5c0 1.105 1.42 2 3.172 2h85.656C90.58 43 92 42.105 92 41v-5c0-1.105-1.42-2-3.172-2zm0 13H3.172C1.42 47 0 47.895 0 49v5c0 1.105 1.42 2 3.172 2h85.656C90.58 56 92 55.105 92 54v-5c0-1.105-1.42-2-3.172-2zM60 13c0 7.18-5.82 13-13 13s-13-5.82-13-13S39.82 0 47 0s13 5.82 13 13z"></path>
                  </svg>
                </div>
              </div>
            </>
          ) : null}
          {showDetailsPosition !== false ? (
            <>
              <h1
                className={contentStyle.subtitle}
                style={{ margin: "30px 0 20px" }}
              >
                个人信息布局
              </h1>
              <div className={classNames(styles.columns, styles.details)}>
                {layout.detailsPosition === "top" ? (
                  <>
                    <div
                      className={classNames(
                        styles.columnItem,
                        header.detailsArrangement === "column"
                          ? styles.active
                          : ""
                      )}
                      onClick={() => {
                        onChange("detailsArrangement", "column");
                      }}
                    >
                      <svg
                        viewBox="0 0 39 24"
                        style={{ width: "45px" }}
                        fill="currentColor"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect width="39" height="6" rx="1"></rect>
                        <rect y="9" width="39" height="6" rx="1"></rect>
                        <rect y="18" width="39" height="6" rx="1"></rect>
                      </svg>
                    </div>
                    <div
                      className={classNames(
                        styles.columnItem,
                        header.detailsArrangement === "grid-2"
                          ? styles.active
                          : ""
                      )}
                      onClick={() => {
                        onChange("detailsArrangement", "grid-2");
                      }}
                    >
                      <svg
                        viewBox="0 0 83 24"
                        style={{ width: "45px" }}
                        fill="currentColor"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect width="39" height="6" rx="1"></rect>
                        <rect x="44" width="39" height="6" rx="1"></rect>
                        <rect y="9" width="39" height="6" rx="1"></rect>
                        <rect x="44" y="9" width="39" height="6" rx="1"></rect>
                        <rect x="44" y="18" width="39" height="6" rx="1"></rect>
                        <rect y="18" width="39" height="6" rx="1"></rect>
                      </svg>
                    </div>
                    <div
                      className={classNames(
                        styles.columnItem,
                        header.detailsArrangement === "grid-3"
                          ? styles.active
                          : ""
                      )}
                      onClick={() => {
                        onChange("detailsArrangement", "grid-3");
                      }}
                    >
                      <svg
                        viewBox="0 0 82 24"
                        style={{ width: "45px" }}
                        fill="currentColor"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect width="24" height="6" rx="1"></rect>
                        <rect y="18" width="24" height="6" rx="1"></rect>
                        <rect x="29" width="24" height="6" rx="1"></rect>

                        <rect width="24" height="6" y="9" rx="1"></rect>
                        <rect x="29" y="9" width="24" height="6" rx="1"></rect>
                        <rect x="58" y="9" width="24" height="6" rx="1"></rect>

                        <rect x="29" y="18" width="24" height="6" rx="1"></rect>
                        <rect x="58" y="18" width="24" height="6" rx="1"></rect>
                        <rect x="58" width="24" height="6" rx="1"></rect>
                      </svg>
                    </div>
                    <div
                      className={classNames(
                        styles.columnItem,
                        header.detailsArrangement === "wrap"
                          ? styles.active
                          : ""
                      )}
                      onClick={() => {
                        onChange("detailsArrangement", "wrap");
                      }}
                    >
                      <svg
                        viewBox="0 0 82 24"
                        style={{ width: "45px" }}
                        fill="currentColor"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect y="9" width="39" height="6" rx="1"></rect>
                        <rect x="44" y="9" width="38" height="6" rx="1"></rect>
                        <rect width="24" height="6" rx="1"></rect>
                        <rect y="18" width="24" height="6" rx="1"></rect>
                        <rect x="29" width="24" height="6" rx="1"></rect>
                        <rect x="29" y="18" width="24" height="6" rx="1"></rect>
                        <rect x="58" y="18" width="24" height="6" rx="1"></rect>
                        <rect x="58" width="24" height="6" rx="1"></rect>
                      </svg>
                    </div>
                  </>
                ) : null}

                {layout.detailsPosition !== "top" ? (
                  <div
                    className={classNames(
                      styles.columnItem,
                      header.detailsArrangement === "column"
                        ? styles.active
                        : ""
                    )}
                    onClick={() => {
                      onChange("detailsArrangement", "column");
                    }}
                  >
                    <svg
                      viewBox="0 0 39 24"
                      style={{ width: "45px" }}
                      fill="currentColor"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <rect width="39" height="6" rx="1"></rect>
                      <rect y="9" width="39" height="6" rx="1"></rect>
                      <rect y="18" width="39" height="6" rx="1"></rect>
                    </svg>
                  </div>
                ) : null}
              </div>
            </>
          ) : null}
        </>
      ) : null}
      <Photo></Photo>
      <DetailsSort></DetailsSort>
      <Spacing></Spacing>

      <div style={{ margin: "20px 10px" }}>
        <Radio.Group
          onChange={(e) => {
            onChange("showLabel", e.target.value);
          }}
          value={header?.showLabel || false}
        >
          <Radio value={true}>展示标签</Radio>
          <Radio value={false}>隐藏标签</Radio>
        </Radio.Group>
      </div>
    </div>
    // : null;
  );
};

export default Index;
